<script setup>
import { ref , watch, onMounted} from 'vue'
import { queryClazzApi,queryByIdApi,addClazzApi,updateClazzApi,deleteApi} from '@/api/clazz';
import { queryAllEmp} from '@/api/emp';
import { ElMessage ,ElMessageBox} from 'element-plus'

//定义表单查询的数据模型
const searchClazz = ref({
  name:'',
  date:[],
  begin:'',
  end:''
})

const clazzList=ref([])


//定义添加班级的数据模型
const clazz=ref({
  name:'',
  room:'',
  beginDate:'',
  endDate:'',
  masterId:'',
  subject:''
})
const dialogFormVisible=ref(false)
const formTitle=ref('')

//定义班主任的数据模型
const masters=ref([])

//定义学科的数据模型
const subjects=ref([
  {name:'java',value:1},
  {name:'前端',value:2},
  {name:'大数据',value:3},
  {name:'Python',value:4},
  {name:'Go',value:5},
  {name:'嵌入式',value:6},
])
//声明添加班级的函数
const add=()=>{
  dialogFormVisible.value=true;
  formTitle.value="添加班级"
  clazz.value={
    name:'',
    room:'',
    beginDate:'',
    endDate:'',
    masterId:'',
    subject:''
  }
  //重置表单效验信息
  if(clazzFormRef.value){
    clazzFormRef.value.resetFields();
  }
}

//分页条的相关数据模型
const currentPage=ref(1)
const pageSize=ref(10)
const total=ref(0)

//列表查询
const search=async()=>{
  const result=await queryClazzApi(searchClazz.value.name,searchClazz.value.begin,searchClazz.value.end,currentPage.value,pageSize.value);
  if(result.code){
    clazzList.value=result.data.rows
    total.value=result.data.total
  }
}
const handleSizeChange = (val) => {
  search();
}
const handleCurrentChange = (val) => {
  search();
}

//查询所有的班主任
const queryAllMaster=async()=>{
  const result=await queryAllEmp()
  if(result.code){
    masters.value=result.data
  }
}


//watch侦听
watch(()=>searchClazz.value.date,(newVal,oldVal)=>{
  if(searchClazz.value.date&&searchClazz.value.date.length>0){
    searchClazz.value.begin=searchClazz.value.date[0];
    searchClazz.value.end=searchClazz.value.date[1];
  }else{
    searchClazz.value.begin='';
    searchClazz.value.end='';
  }
})



 //清空查询表单
const clear=()=>{
 searchClazz.value={ name: '',date: [],begin: '',end: ''};
  search();
} 



//保存班级信息
const save = async () => {
  if (!clazzFormRef) return
  await clazzFormRef.value.validate(async (valid, fields) => {
    if (valid) {//通过
      let result;
      if(clazz.value.id){//修改
        result = await updateClazzApi(clazz.value);
      }else{
        result = await addClazzApi(clazz.value);
      }
      if (result.code) {
        dialogFormVisible.value = false;
        ElMessage.success('保存成功');
        search();
      } else {
        ElMessage.error(result.msg);
      }
    }else {//不通过
      ElMessage.error('表单效验不通过,请检查表单');
    }
});
    } 

    //表单校验
const clazzFormRef = ref();
//表单校验规则
const rules = ref({
  name: [
    { required: true, message: '请输入班级名称', trigger: 'blur' },
    { min: 1, max: 10, message: '班级名称不能为空', trigger: 'blur' }
  ],
  beginDate: [
    { required: true, message: '请选择开课时间', trigger: 'blur' },
  ],
  endDate: [
    { required: true, message: '请选择结课时间', trigger: 'blur' }
  ],
  subject: [
    { required: true, message: '请选择学科', trigger: 'blur' },
  ]
});



//编辑班级信息
//先查询 
const edit=async (id)=>{
  const result=await queryByIdApi(id)
  if(result.code){
    dialogFormVisible.value=true;
    formTitle.value="修改班级";
    clazz.value=result.data;
    //重置表单效验信息
  if(clazzFormRef.value){
    clazzFormRef.value.resetFields();
  }

  }else{
    ElMessage.error(result.msg)
  }
  }

//定义钩子函数
onMounted(() => {
  search();
  queryAllMaster();
}); 

//删除员工
const deleteById=(id)=>{ 
  ElMessageBox.confirm(
    '您确定要删除该条数据吗?','提示',{confirmButtonText: '确认', cancelButtonText: '取消',  type: 'warning',
    }
  ).then(async() => {//确认删除
      const result=await deleteApi(id);
      if(result.code){
        ElMessage.success('删除成功');
        search();
      }else{
        ElMessage.error(result.msg);
      }
      }).catch((err) => {//取消删除
        ElMessage.info('已取消删除');
    })
  }


</script>


<template>
  <h1>班级管理</h1>

  <div class="div1">
    <el-form :inline="true" :model="searchClazz" class="demo-form-inline">
    <el-form-item label="班级名称">
      <el-input v-model="searchClazz.name" placeholder="请输入班级信息"  />
    </el-form-item>

    <el-form-item label="结课时间">
      <el-date-picker
        v-model="searchClazz.date"
        type="daterange"
        range-separator="到"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="info" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>
  </div>

  <el-button type="primary" @click="add">+ 新增班级</el-button>

 <!--  班级列表 -->
    <!-- 部门列表 -->
  <el-table :data="clazzList" border style="width: 100%;margin-top: 30px;">
    <el-table-column type="index" label="序号" width="80" align="center" />
    <el-table-column prop="name" label="班级名称" width="120" align="center"/>
    <el-table-column prop="room" label="班级教室" width="120" align="center"/>
    <el-table-column prop="masterName" label="班主任" width="120" align="center"/>
    <el-table-column prop="beginDate" label="开课时间" width="120" align="center"/>
    <el-table-column prop="endDate" label="结课时间" width="120" align="center"/>
    <el-table-column prop="status" label="状态" width="120" align="center"/>
    <el-table-column prop="updateTime" label="最后操作时间" width="180" align="center"/>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteById(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<br>

 <!-- 分页 -->
 <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40,50,100]"
       layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> 




  <!-- 新增/修改的表单 -->

  
  <el-dialog v-model="dialogFormVisible" :title="formTitle" width="500">
    <el-form :model="clazz" :rules="rules" ref="clazzFormRef">
      <el-form-item label="班级名称" prop="name">
        <el-input v-model="clazz.name"  placeholder="请输入班级名称,如:西安黑马JavaEE就业100期"/>
      </el-form-item>
      <el-form-item label="班级教室" prop="room">
        <el-input v-model="clazz.room" placeholder="请填写班级教室"/>
      </el-form-item>
        <el-form-item label="开课时间" prop="beginDate">
              <el-date-picker v-model="clazz.beginDate" type="date" style="width: 100%;" placeholder="请选择开课日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
            </el-form-item>
            <el-form-item label="结课时间" prop="endDate">
              <el-date-picker v-model="clazz.endDate" type="date" style="width: 100%;" placeholder="请选择结课日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
            </el-form-item>   
        <el-form-item label="班主任" prop="masterId">
              <el-select v-model="clazz.masterId" placeholder="请选择" style="width: 100%;">
                <el-option v-for="master in masters" :label="master.name" :value="master.id"></el-option>
              </el-select>
            </el-form-item>     

            <el-form-item label="学科" prop="subject">
              <el-select v-model="clazz.subject" placeholder="请选择" style="width: 100%;">
                <el-option v-for="sub in subjects" :label="sub.name" :value="sub.value"></el-option>
              </el-select>
            </el-form-item>  
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button  @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="save">保存</el-button>

      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
.div1{
  margin-top: 30px;
}

</style>